<template>
  <view class="my_challenge">
    <view class="challenge_tabs">
      <u-tabs
          :list="tdTabslist"
          :is-scroll="true"
          :current="tabCurrent"
          @change="tabChange"
          font-size="26rpx"
          item-width="25%"
          active-color="#FF6374"
          inactive-color="#999999"
          :active-item-style="{ color: '#303133' }"
          bar-height="10" style="width: 100%"></u-tabs>
    </view>
    <view class="challenge_list">
      <view class="challenge_tabs_height" :style="{height: tdTabsHeight + 'px'}"></view>
      <scroll-view scroll-y="true">
        <view class="challenge_item" v-for="(item, index) in challengeList" :key="index">
          <view class="challenge_item_img">
            <view class="challenge_item_img_text">
              <text style="font-size: 52rpx">{{ item.reward_value ? item.reward_value.split('.')[0] : 0 }}</text>
              <text style="font-size: 26rpx">元</text>
            </view>
            <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="challenge_item_content">
            <view class="challenge_item_content_time">
              <view class="challenge_item_content_startTime">
                <text>开始时间：</text>
                <text>{{ item.start_date }}</text>
              </view>
              <view class="challenge_item_content_endTime">
                <text>结束时间：</text>
                <text>{{ item.end_date }}</text>
              </view>
            </view>
            <view v-if="item.status == 1" @click="cancelSignUP(item)" class="challenge_item_content_btn">取消报名</view>
            <view v-if="item.status == 2" @click="claimReward(item)" class="challenge_item_content_btn">领取奖励</view>
            <view v-if="item.status == 3" class="claim">{{ item.reward_value }}元</view>
            <view v-if="item.status == 4" class="failed">任务失败</view>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurlBwc,
      tdTabsHeight: 0, // tabs高度
      tdTabslist: [
        {
          name: '进行中',
          id: 1,
          status: 1,
        },
        {
          name: '挑战失败',
          id: 2,
          status: 4,
        },
        {
          name: '待领奖',
          id: 3,
          status: 2,
        },
        {
          name: '已领奖',
          id: 4,
          status: 3,
        },
      ],
      tabCurrent: 0,
      // 用户参与的挑战任务列表
      challengeList: [],
      // 挑战任务类型
      status: 1,
      pageSize: 10, //每页数量
      currentPage: 1, //当前页码
    };
  },
  onLoad() {
    let that = this
    that.getUserChallengeList()
    //获取tabs的高度
    uni.createSelectorQuery().select('.challenge_tabs').boundingClientRect(rect => {
      that.tdTabsHeight = rect.height
      console.log('tabsHeight高度==', rect.height)
    }).exec();
  },
  methods: {
    // tabs切换事件
    tabChange(item) {
      let that = this
      console.log('item', item)
      that.tabCurrent = item.index;
      that.status = item.status
      that.challengeList = []
      that.currentPage = 1
      that.getUserChallengeList()
    },
    // 获取我的挑战任务列表
    getUserChallengeList() {
      let that = this
      that.$api.getUserChallengeActivityListAPI({
        status: that.status,
      }).then(res => {
        if (res.data.code == 200){
          console.log('我的挑战任务列表', res.data.result)
          that.challengeList = res.data.result.list
        }
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },
    // 领取奖励
    claimReward(item){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定领取奖励吗？',
        success: function (res) {
          if (res.confirm) {
            that.$api.getClaimRewardAPI({
              user_challenge_id: item.id
            }).then(res => {
              if (res.data.code == 200){
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  duration: 2000
                });
                that.getUserChallengeList()
              }
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
              })
            })
          }
        }
      })
    },
    // 取消报名
    cancelSignUP(item){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定取消报名吗？',
        success: function (res) {
          if (res.confirm) {
            that.$api.getCancelChallengeActivityAPI({
              user_challenge_id: item.id
            }).then(res => {
              if (res.data.code == 200){
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  duration: 2000
                });
                that.getUserChallengeList()
              }
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
              })
            })
          }
        }
      });

    },
  },
}
</script>

<style lang="scss">
.page{
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
.my_challenge{
  width: 100%;
  height: 100%;
}
.challenge_tabs{
  height: 100rpx;
  padding: 5rpx 0;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  background: #FFFFFF;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}
.challenge_list{
  padding: 0 20rpx;
  .challenge_item{
    display: flex;
    flex: 1;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #E5E5E5;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .challenge_item_content_time{
        width: calc(100% - 150rpx);
        margin-left: 10rpx;
        .challenge_item_content_startTime{
          display: flex;
        }
      }
      .challenge_item_content_btn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
        border-radius: 30rpx;
      }
      .claim{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 32rpx;
        color: #FD3F03;
      }
      .failed{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
}
</style>
